
//饼图
function pieEvt(pieData,lengendData,len,id,color){
    var pie3Opt = {
        color:color,
        backgroundColor: 'transparent',
        legend: {
            orient: 'horizontal',
            top: '75%',
            data:lengendData,
            textStyle:{
                color:'#fff'
            }
        },
        tooltip : {
            trigger: 'item',
            //formatter: "{a} <br/>{b} : {c} ({d}%)",
            formatter:function(param){
                if(param.name){
                	return  '<div>'+param.name+'</div>' +
			        '<div>'+param.value+'  ('+param.percent+'%)</div>'
                }
    		},
            position:'right'
        },
        series: [{
            name: '',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['45%', '40%'],
            hoverAnimation: true,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            },
            data: pieData
        },{
            name: '',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            animationType: 'scale',
            radius: [200, 200],
            center: ['45%', '40%'],
            label: {
                normal: {
                    position: 'center'
                }
            },
            data: [{
                value: 0,
                label: {
                    normal: {
                        formatter: '38',
                        textStyle: {
                            color: '#20fd07',
                            fontSize: 25,
                            fontWeight: 'bold'
                        }
                    }
                }
            }, {
                tooltip: {
                    show: false
                },
                label: {
                    normal: {
                        formatter: '\n门户',
                        textStyle: {
                            color: '#bbeaf9',
                            fontSize: 12
                        }
                    }
                }
            }]
        }]
    };
    var pie3Chart = echarts.init(document.getElementById(id))
    pie3Chart.setOption(pie3Opt)
    window.addEventListener("resize", function () {
        pie3Chart.resize();
    });
    var pieIndex = 0
    var pieAutoShow = function(){
        if (pieIndex >len-1){
            pieIndex = 0
        }
        for (var i = 0;i <len;i++){
            if (i != pieIndex){
                pie3Opt.series[0].data[i]['selected'] = false;
            }else{
                pie3Opt.series[0].data[i]['selected'] = true;
            }
        }
        //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
        pie3Opt.series[1].data[0].label.normal.formatter=parseInt(pieData[pieIndex].value/sum(pieData)*100) + "%"
        pie3Opt.series[1].data[1].label.normal.formatter = "\n" + pie3Opt.series[0].data[pieIndex].name
        pie3Chart.setOption(pie3Opt)
        pieIndex++
        setTimeout(pieAutoShow,1200)
    }
    pieAutoShow()
}

function lengendData(data){
	var lenData=[];
	for(var i=0;i<data.length;i++){
		lenData.push(data[i].name)
	}
	return lenData
}

function sum(data){
	var totle=0;
	for(var i=0;i<data.length;i++){
		totle+=data[i].value;
	}
	return totle
}



var pieData1=[
	{name:'恶意扣费',value:26 },
	{name:'隐私窃取',value:17 },
	{name:'远程控制',value:8  },
	{name:'恶意传播',value:6  },
	{name:'资费消耗',value:116},
	{name:'系统破坏',value:18 },
	{name:'诱骗欺诈',value:142},
	{name:'流氓行为',value:185}
]
var lengendData1=lengendData(pieData1)
var color1=["#ffe34e", "#a0a7e6", "#a6e382", "#96dee8","#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e"];
pieEvt(pieData1,lengendData1,pieData1.length,"appPie1",color1)
var pieData2=[
	{name:'色情低俗',value:1092 },
	{name:'暴力恐怖',value:2414 },
	{name:'吸毒贩毒',value:12   },
	{name:'聚众赌博',value:2334 },
	{name:'反党反动',value:112  },
	{name:'网络借贷',value:30302}
]
var lengendData2=lengendData(pieData2)
var color2=["#ffe34e", "#a0a7e6", "#a6e382", "#96dee8","#560081","#af0058", "#ff8700", "#ffe34e", "#93dd6e"];
pieEvt(pieData2,lengendData2,pieData2.length,"appPie2",color2)

//地图
var mapData=[
	{name:'崇明县',value:80},
	{name:'奉贤区',value:19},
	{name:'浦东新区',value:17},
	{name:'金山区',value:90},
	{name:'青浦区',value:100},
	{name:'松江区',value:31},
	{name:'嘉定区',value:37},
	{name:'宝山区',value:14},
	{name:'闵行区',value:13},
	{name:'杨浦区',value:42},
	{name:'普陀区',value:32},
	{name:'徐汇区',value:69},
	{name:'长宁区',value:25},
	{name:'闸北区',value:32},
	{name:'虹口区',value:69},
	{name:'黄浦区',value:13},
	{name:'静安区',value:94}
]
var geoCoordMap={}
var mapFeatures = echarts.getMap('上海').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
var optionMap = {
		tooltip : {
			trigger : 'item',
			formatter : function(param) {
				// console.log(param)
				var value = 0;
				if(param.value[2]){
					value = param.value[2];
				}
				return '<div> '+ param.name+ 'APP违规数量：'+value+'</div>';
			}
		},
		geo : {
			show : true,
			zoom : 1.2,
			roam : false,
			map : '上海',
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#285ac6',
					borderWidth : 1,
					areaColor : '#123082',
					shadowBlur : 3,
					shadowColor : '#081435',
					shadowOffsetX : -4,
					shadowOffsetY : 8
				},
				emphasis : {
					areaColor : '#fce24f',
					borderColor : '#fce24f'
				}
			}
		},
		series : [ {
			type : 'map',
			zoom : 1.2,
			mapType : '上海',
			// geoIndex: 0,
			roam : false,
			label : {
				normal : {
					show : false,
					textStyle : {
						color : '#fff'
					}
				},
				emphasis : {
					show : true,
					textStyle : {
						color : '#fff'
					}
				}
			},
			itemStyle : {
				normal : {
					show : false,
					borderColor : '#3770ea',
					borderWidth : 1,
					areaColor : '#0f2d87'
				},
				emphasis : {
					areaColor : '#2a56bd',
					borderColor : '#2a56bd',
				// opacity: 0.8,
				}
			},
			data : convertData(mapData)
		}, {
			name : 'Top 5',
			type : 'effectScatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				return val[2] / 100 * 15
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(mapData.sort(function(a, b) {
				return b.value - a.value
			}).slice(0, 5))
		}, {
			name : 'Top 5',
			type : 'scatter',
			zlevel : 1,
			coordinateSystem : 'geo',
			symbolSize : function(val) {
				return val[2] / 100 * 15
			},
			showEffectOn : 'render',
			rippleEffect : {
				brushType : 'stroke'
			},
			hoverAnimation : true,
			label : {
				normal : {
					// formatter: '{b}',
					position : 'right',
					show : false
				}
			},
			itemStyle : {
				normal : {
					color : '#f4e925',
					shadowBlur : 10,
					shadowColor : '#333'
				}
			},
			// data: convertData(mapData)
			data : convertData(mapData.sort(function(a, b) {
				return b.value - a.value;
			}).slice(5))
		} ]
};
var mapChart = echarts.init(document.getElementById('APPChina'))
mapChart.setOption(optionMap)
window.addEventListener("resize", function () {
    mapChart.resize();
});


//右下折线图
var timeData= ['便捷生活','休闲游戏','金融理财','学习办公','实用工具','社交通讯','新闻阅读','出行导航','医疗健康','影音娱乐']
var data1=[5065,266,20209,671,1752,148,244,117,44,48]
var data2=[120, 182, 301, 234, 190, 150, 110, 202, 201, 364, 190, 70]
var barOption = {
    color : ["#1de5f2","#0edf4d"],
    tooltip : {
//      trigger: 'axis',
    },
    grid: {
        top:30,
        left: '0%',
        right: '3%',
        bottom: 30,
        containLabel: true
    },
    xAxis: {
        boundaryGap : true,
        type: 'category',
        splitLine:{    //grid区域分隔线
            show:false,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true,
            textStyle: {
                color: '#0d7790'
            }
        },
        axisTick: {
            show: true,   //刻度线
            color:"#c0d4da"
        },
        axisLine:{
            show: true,   //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
        data : timeData
    },
    yAxis : {
        splitLine:{    //grid区域分隔线
            show:true,
            lineStyle: {
                width:1,
                type:"solid",
                color:"#2a3f7e"
            }
        },
        axisTick: {
            show: true,   //刻度线
            color:"#c0d4da"
        },
        axisLine: {
            show: true ,  //坐标轴轴线
            lineStyle: {
                width:1,
                color:"#c0d4da"
            }
        },
        axisLabel: {  //坐标轴标签
            show: true
        },
    },
    series : [
        {
            type:'bar',
            barWidth:'50%',
            symbol:'none',  //这句就是去掉点的
//          lineStyle: { normal: {
//              color:'#1de5f2',
//          }},
//          areaStyle: {
//              normal: {
//                  color:'#1de5f2',
//                  opacity: 0.2
//              }
//          },
            data:data1
        }
    ]
};
var barChart = echarts.init(document.getElementById('appLine'))
barChart.setOption(barOption);
window.addEventListener("resize", function () {
    barChart.resize();
});




